<template>
  <div class="section_common">
    <div class="main">
      <el-form ref="form" label-width="100px">

        <el-form-item label="分类" required>
          <el-select v-model="itemSpec" :filterable="true" size="mini" @change="selectItemSpec" placeholder="请选择">
            <el-option v-for="(item,index) in itemSpecs" :key="index"  :label="item" :value="item" ></el-option>
            <!--<el-option label="器材类" value="器材类"></el-option>
            <el-option label="道具类" value="道具类"></el-option>
            <el-option label="模特类" value="模特类"></el-option>
            <el-option label="消耗品" value="消耗品"></el-option>
            <el-option label="器材辅件" value="器材辅件"></el-option>
            <el-option label="常规办公" value="常规办公"></el-option>-->
          </el-select>
        </el-form-item>
        <el-form-item label="物品名称" required>
          <!--<el-cascader v-model="itemName" size="mini" :options="columns" @change="onConfirm">
            &lt;!&ndash;<van-picker
                    show-toolbar
                    :columns="columns"
                    @confirm="onConfirm"
                    @cancel="showPicker = false"
            />&ndash;&gt;
          </el-cascader>-->
          <!--<el-select v-model="itemName" @change="changeSelect" :filterable="true" size="mini" placeholder="请选择">-->
          <el-select v-model="itemName" :filterable="true" @change="selectItemName" size="mini" placeholder="请选择">
            <el-option v-for="(item,index) in itemNames" :key="index"  :label="item.itemName" :value="item.itemName" ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="型号" required>
          <el-select v-model="type" :filterable="true" size="mini" @change="selectType" placeholder="请选择">
            <el-option v-for="(item,index) in types" :key="index"  :label="item.type" :value="item.type" ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="物品规格" required>
          <!--<el-select v-model="spec" :filterable="true" size="mini" placeholder="请选择">
            &lt;!&ndash;<el-option v-for="(item,index) in specs" :key="index"  :label="item.label" :value="item.value"></el-option>&ndash;&gt;
            <el-option value="台"></el-option>
            <el-option value="张"></el-option>
            <el-option value="个"></el-option>
            <el-option value="只"></el-option>
            <el-option value="支"></el-option>
          </el-select>-->
          <el-input v-model="spec" size="mini" readonly></el-input>
        </el-form-item>
        <el-form-item label="管理人" required>
          <el-select v-model="createUser" :filterable="true" size="mini" @change="selectCreateUser" placeholder="请选择">
            <el-option v-for="(item,index) in createUsers" :key="index"  :label="item.createUser" :value="item.createUser" ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="库存数量" required>
          <el-input v-model="total" size="mini" type="number" readonly></el-input>
        </el-form-item>
        <el-form-item label="申请数量" required>
          <el-input v-model="num" size="mini" type="number"></el-input>
        </el-form-item>

        <el-form-item label="申请原因" required>
          <el-input v-model="applyReason" size="mini"></el-input>
        </el-form-item>

        <!--<van-steps direction="vertical" :active="active" active-icon="checked" active-color="#38f">
          <van-step v-if="oneShow">
            <h3>一级审批</h3>
            <van-image v-for="(item,index) in onespusers" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
              <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
            </van-image>
          </van-step>

          <van-step v-if="twoShow">
            <h3>二级审批</h3>
            <van-image v-for="(item,index) in twospusers" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
              <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
            </van-image>
          </van-step>

          <van-step v-if="threeShow">
            <h3>三级审批</h3>
            <van-image v-for="(item,index) in threespusers" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
              <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
            </van-image>
          </van-step>

          <van-step v-if="yxshow">
            <h3>{{yxleader}}</h3>
            <van-image width="60" height="60" :src="yxleaderImg"></van-image>
          </van-step>
          <van-step>
            <h3>{{hrleader}}</h3>
            <van-image width="60" height="60" :src="hrleaderImg"/>
          </van-step>

          <van-step>
            <h3>{{bossleader}}</h3>
            &lt;!&ndash;<van-image width="60" height="60" :src="boss1leaderImg" style="margin-right: 20px"/>&ndash;&gt;
            <van-image width="60" height="60" :src="boss2leaderImg"/>
          </van-step>
        </van-steps>-->
        <van-steps direction="vertical" :active="active" active-icon="checked" active-color="#38f">
          <van-step v-show="oneShow">
            <van-image v-for="(item,index) in oneLd" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
              <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
            </van-image>
          </van-step>
          <van-step v-show="twoShow">
            <van-image v-for="(item,index) in twoLd" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
              <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
            </van-image>
          </van-step>
          <van-step v-show="threeShow">
            <van-image v-for="(item,index) in threeLd" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
              <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
            </van-image>
          </van-step>
          <van-step v-show="fourShow">
            <van-image v-for="(item,index) in fourLd" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
              <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
            </van-image>
          </van-step>
          <p style="font-size: 15px ;justify-content: center">抄送人：</p>
          <van-image src="http://wework.qpic.cn/wwhead/duc2TvpEgSSWiaVLaJnssaQhAwV9wqgTueeE8IC2UCp8BG20aDWFTWZZ895sRylCibRzNRMoGqJ3w/0" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
            <p style="font-size: 10px ;justify-content: center">邹威</p>
          </van-image>
          <van-image v-if="createUserShow==true" :src="createUserAvator" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
            <p style="font-size: 10px ;justify-content: center">{{createUserName}}</p>
          </van-image>
        </van-steps>

        <el-form-item>
          <el-button type="primary" size="mini" @click="submitPost" >提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue';
  import {Image as VanImage,Toast, Calendar,Form ,Picker,Popup} from "vant";
  Vue.use(Calendar);
  Vue.use(Form);
  Vue.use(Picker);
  Vue.use(Popup);
  Vue.use(VanImage);
export default {
  data() {
    return {
      wpdata:[],
      itemNameList:[],
      typeList:[],
      specList:[],
      createUser:'',
      createUsers:[],

      itemSpec:'',
      itemSpecs:['器材类' , '道具类' , '模特类' , '消耗品' , '器材辅件' , '常规办公','其他'],
      itemName:'',
      itemNames:[],
      type:'',
      types:[],
      spec:'',
      specs:[],
      num:'',
      total:'',
      applyReason:'',
      active:"-1",//步骤索引,从0开始
      oneShow:false,//审批是否显示
      oneLd:[],
      twoShow:false,
      twoLd:[],
      threeShow:false,
      threeLd:[],
      fourShow:false,
      createUserShow:false,
      createUserAvator:'',
      createUserName:'',
      fourLd:[],

      temp1:[{name:'电脑',id:1,children:[{name:'dell',id:2,children:[{}]},{name:'小米',id:3,children:[{}]}]  },{name:'用具',id:2},{name:'zzz',id:3},],
      temp2:'',
    };
  },
  created() {
    this.nowUser=JSON.parse(localStorage.getItem('userInfo')).userId;
    this.getLd();
    this.getToolStock();
  },

  methods: {
    changeSelect(value){
      console.log(value);
      this.temp1.filter(e=>{
          if(e.id==value){
            this.temp2=e.children
            return true
          }
      })
    },
    selectItemSpec(value){
      console.log(value);
      this.itemNames = [];
      this.itemName = '';
      this.types = [];
      this.type = '';
      this.spec = '';
      this.createUser = '';
      this.total = '';
      this.createUserShow = false;
      if (this.itemSpec != ''){
        let specList = [];
        for (let i in this.wpdata) {
          if (value === this.wpdata[i].itemSpec){
            let str = {};
            str.id = this.wpdata[i].id;
            str.itemName = this.wpdata[i].itemName;
            specList.push(str)
          }
        }
        // this.itemNames = specList;
        // console.log(this.itemNames);
        var hash = {};
        var arr = [];
        arr = specList.reduce(function (item,next) {
          hash[next.itemName] ? '' : hash[next.itemName] = true && item.push(next);
          return item;
        },[])
        this.itemNames = arr;
      }
    },
    selectItemName(value){
      // console.log(value);
      this.types = [];
      this.type = '';
      this.spec = '';
      this.createUser = '';
      this.total = '';
      this.createUserShow = false;
      if (this.itemName != ''){
        let typeList = [];
        for(let i in this.wpdata){
          if (this.itemSpec === this.wpdata[i].itemSpec && value === this.wpdata[i].itemName){
            let str = {};
            str.id = this.wpdata[i].id;
            str.type = this.wpdata[i].type;
            typeList.push(str);
          }
        }
        // this.types = typeList;
        // console.log(this.types);
        var hash = {};
        var arr = [];
        arr = typeList.reduce(function (item,next) {
          hash[next.type] ? '' : hash[next.type] = true && item.push(next);
          return item;
        },[])
        this.types = arr;
      }

    },
    selectType(value){
      // console.log(value)
      this.spec = '';
      this.createUser = '';
      this.total = '';
      this.createUserShow = false;
      let createUserList = [];
      for(let i in this.wpdata){
        if (this.itemSpec === this.wpdata[i].itemSpec && this.itemName === this.wpdata[i].itemName && value === this.wpdata[i].type){
          this.spec = this.wpdata[i].spec
          let str = {};
          str.id = this.wpdata[i].id;
          str.createUser = this.wpdata[i].createUser;
          createUserList.push(str);
        }
      }
      // this.createUsers = createUserList;
      var hash = {};
      var arr = [];
      arr = createUserList.reduce(function (item,next) {
        hash[next.createUser] ? '' : hash[next.createUser] = true && item.push(next);
        return item;
      },[])
      this.createUsers = arr;
    },
    selectCreateUser(value){
      console.log(value)
      this.total = '';
      this.createUserShow = false;
      for(let i in this.wpdata){
        if (this.itemSpec === this.wpdata[i].itemSpec && this.itemName === this.wpdata[i].itemName && this.type === this.wpdata[i].type && value === this.wpdata[i].createUser){
          this.total = this.wpdata[i].total
          this.getCreateUserInfo(this.wpdata[i].jobNumId)
          console.log(this.total)
        }
      }
    },
    getCreateUserInfo(jobNumId){
      this.$https.post('/mobiles/getCreateUserInfo',{
        jobNumId:jobNumId,
      }).then((res)=>{
        console.log(res.data.data);
        this.createUserShow = true;
        this.createUserAvator = res.data.data.avatar;
        this.createUserName = res.data.data.name;
        /*if (res.data.data.length>0){

        }*/
      }).catch(err => {
        console.log(err);
      })
    },
    getLd(){
      this.$https.post('/mobiles/getPLeader',{
        userId:this.nowUser,
      }).then((res)=>{
        if (res.data.data.onespusers.length>0){
          this.oneShow=true;
          this.oneLd=res.data.data.onespusers;
        }
        if (res.data.data.twospusers.length>0){
          this.twoShow=true;
          this.twoLd=res.data.data.twospusers;
        }
        if (res.data.data.threespusers.length>0){
          this.threeShow=true;
          this.threeLd=res.data.data.threespusers;
        }
        if (res.data.data.fourspusers.length>0){
          this.fourShow=true;
          this.fourLd=res.data.data.fourspusers;
        }
      }).catch(err => {
        console.log(err);
      })
    },
    /*typeForeach(){
      for (let i = 0; i < this.wpdata.size(); i++) {
        console.log(this.wpdata[i].itemName)
        if(this.wpdata[i].itemName == this.itemName){
          this.typeList.push(this.wpdata[i].type)
          this.formatLacation(this.typeList,this.types,'type','type')
          console.log(this.typeList)
        }
      }
    },*/
    /*specForeach(){
      for (let i = 0; i < this.wpdata.length; i++) {
        if(this.wpdata[i].type == this.type){
          this.specList.put(this.wpdata[i].spec)
        }
      }
    },*/
    getToolStock(){
      this.$https.get('/mobiles/toolStock').then((res)=>{
        // console.log(res)
        this.wpdata = res.data.data;
        //拿到数据后遍历
        /*let articleFile = [];
        for(let i in this.wpdata){
          let str = {};
          str.id = this.wpdata[i].id;
          str.itemName = this.wpdata[i].itemName;
          articleFile.push(str);
        }
        this.itemNames = articleFile;*/
        // console.log(this.itemNames)

        // this.formatLacation(this.wpdata,this.itemNames,'itemName','itemName')
        // this.formatLacation(this.wpdata,this.types,'type','type')
        // this.formatLacation(this.data,this.specs,'spec','spec')
      }).catch(err => {
        console.log(err);
      })
    },
    //格式化物品归宿地
    /*formatLacation(data,curr,foo,id){
      if(data){
        for(let i=0;i<data.length;i++){
          curr.push({
            label:data[i][foo],
            value:data[i][id],
          })
        }
      }
    },*/

    showPAtt(){
      this.showPickerAtt=true;
    },

    // 返回
    goBack() {
      this.$router.go(-1);
    },
    // 提交
    submitPost() {
      if (!this.isNull()) return false;
      if (this.total < this.num){
        this.$toast("申请数量不能大于库存数量");
        return false;
      }
      this.$https.post('/mobiles/applyRecordAdd', {
        userId:this.nowUser,
        itemSpec:this.itemSpec,
        itemName:this.itemName,
        type:this.type,
        spec:this.spec,
        num: this.num,
        createUser: this.createUser,
        applyReason:this.applyReason,

      }).then(res => {
        console.log(res)
        Toast("申请成功");
        this.$router.go(-1);
      }).catch(err => {
        console.log(err)
      });
    },
    //判断相关数据是否为空
    isNull() {
      if (this.itemSpec == '') {
        this.$toast("请选择分类");
        return false;
      }
      if (this.itemName == '') {
        this.$toast("请选择物品名称");
        return false;
      }
      if (this.type=='') {
        this.$toast("请选择型号");
        return false;
      }
      if (this.spec=='') {
        this.$toast("请选择规格");
        return false;
      }
      if (this.num=='') {
        this.$toast("数量不能为空");
        return false;
      }
      if (this.createUser=='') {
        this.$toast("管理人不能为空");
        return false;
      }
      if (this.applyReason=='') {
        this.$toast("申请原因不能为空");
        return false;
      }
      return true;
    },

  },
  /*watch:  {
    types:function (){
      if (this.itemName != ''){
        this.typeForeach()
        /!*if (this.type != ''){
          this.specForeach()
        }*!/
      }
    }

  },*/
};
</script>

<style lang="scss" scoped>
.main {
  display: flex;
  justify-items: center;
  margin: 0 auto;
  .el-form {
    padding-right: 10px;
    .el-form-item {
      .el-form-item__label {
        line-height: 16px;
      }
      margin-bottom: 5px;
    }
  }
}
</style>
